<template>
	<view class="">
		<navbar :title="$t('common.record')" :background="$utypeprimary" :titleColor="$utitlecolor" :backColor="$utitlecolor">
		 </navbar>
		 <view class="state">
		 	<view class="unchecked" @click="state(1)" :class="{checked:sum==1}">
		 		{{ $t("withdraw.success")}}
		 	</view>
			<view class="unchecked" @click="state(2)" :class="{checked:sum==2}">
				{{ $t("withdraw.fail")}}
			</view>
			<view class="unchecked" @click="state(0)" :class="{checked:sum==0}">
				{{ $t("withdraw.under")}}
			</view>
		 </view>
		 <mescroll-body ref="mescrollRef" @up="upCallback" @init="mescrollInit" @down="downCallback"
			:down="downOption" :up="upOption">
			<view>
		 <view class="graygray" v-for="item in list" >
		 	<view class="msg" >
		 		<view class="msg1">
		 			<view class="">
		 				{{ $t("withdraw.order")}}
		 			</view>
					<view class="count">
						{{item.order_id}}
					</view>
		 		</view>
				<view class="msg1">
					<view class="">
		 				{{ $t("withdraw.createtime")}}
		 			</view>
					<view class="count">
						{{item.createtime}}
					</view>
				</view>
				<view class="msg2">
					<view class="">
						{{ $t("withdraw.amount")}}
					</view>
					<view class="">
						{{ $currency }}{{item.price}}
					</view>
				</view>
				<view class="msg4">
					<view class="">
						{{ $t("withdraw.actual")}}
					</view>
					<view class="">
						{{ $currency }}{{item.trueprice}}
					</view>
				</view>
				<view class="line">
				</view>
				<view class="msg3" >
					<view class="yes" v-show="sum==1">
						{{item.title}}
					</view>
					<view class="reason"  v-show="sum==2">
						<view class="">
							{{ $t("withdraw.reason")}}
						</view>
						<view class="reason1">
							{{item.content}}
						</view>
					</view>
					<view class="no"  v-show="sum==0">
						
						{{item.title}}
					</view>
				</view>
		 	</view>
		 </view>
		 </view>
		 </mescroll-body>
	</view>
</template>

<script>
	import {
		withdrawlog,
	} from '@/api/money.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
	export default{
		mixins: [MescrollMixin],
		components: {
			MescrollBody
		},
		data(){
			return{
				sum: 0,
				downOption: {
					use: true,
					auto: true
				},
				upOption: {
					use: true,
					auto: true,
					page: {
						num: 0,
						size: 10
					}
				},
				list: []
			}
		},
		watch:{
			'sum' (val) {
				this.list = []
				this.mescroll.resetUpScroll()
			}
		},

		methods:{
			state(e){
				this.sum=e
				
			},
			async upCallback(page) {
				let pageNum = (page.num - 1) * page.size
				let pageSize = page.size
				// withdrawlog({
				// 	page: 1,
				// }).then(res => {
				// 	let curPageData = res.list
				// 	let curPageLength = curPageData.length
			
				// 	let totalSize = +res.count
			
				// 	if (page.num == 1) this.addressList = []
				// 	this.addressList = this.addressList.concat(curPageData)
					
			
				// }).catch(err => {
					// 	this.mescroll.endErr()
				// })
				let result = await withdrawlog({
					page: page.num,
					status: this.sum
				})
				if (page.num == 1) this.list = []
				this.list = this.list.concat(result)
				let curPageLength = result.length
				this.mescroll.endSuccess(curPageLength)
			},
		}
			
				
			
		
	}
</script>
<style lang="scss">
	page{
		background-color: #F6F6F6FF;
	}
</style>
<style lang="scss" scoped>
	page {
		background: #F6F6F6;
	}
	.state{
		width: 750rpx;
		height: 114rpx;
		background: #FFFFFF;
		display: flex;
		.unchecked{
			width: 250rpx;
			height: 114rpx;
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color:#65676B;
			line-height: 114rpx;
			text-align: center;
		}
		.checked{
			fontsize:32rpx;
			color: #0F0F0E;
			border-bottom: 6rpx solid #C17C1C;
		}
	}
	.graygray{
		overflow: hidden;
		background-color: #F6F6F6;
		.msg{
			overflow: hidden;
			width: 690rpx;
			background: #FFFFFF;
			padding-bottom: 30rpx;
			border-radius: 20rpx;
			margin: 30rpx;
			.msg1{
				margin: 30rpx 30rpx 50rpx;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #AAAAAA;
				line-height: 20rpx;
				.count,.time{
					word-break: break-all;
					margin-top: 3rpx;
				}
				.count{
					margin-left: -92rpx;
				}
			}
			.msg2{
				display: flex;
				justify-content: space-between;
				margin: 0 30rpx 43rpx;
				height: 28rpx;
				line-height: 28rpx;
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #0F0F0E;
			}
			.msg4{
				display: flex;
				justify-content: space-between;
				margin:0 30rpx 40rpx ;
				font-size: 32rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #0F0F0E;
				height: 28rpx;
				line-height: 28rpx;
			}
			.line{
				width: 690rpx;
				height: 2rpx;
				background: #ECECEC;
			}
			
			.msg3{
				height:21rpx;
				margin-top: 25rpx;
				margin-left: 30rpx;
				line-height: 21rpx;
				font-size: 30rpx;
				font-family: Rubik;
				font-weight: 400;
				
				.yes{
					color: #AAAAAA;;
				}
				.no,{
					 color: #FC3E32;
				}
				.reason{
					color: #FC3E32;
					display: flex;
					.reason1{
						margin-left: 14rpx;
					}
				}
			}
		}
	}
	
	
	
</style>
